<!doctype html>
<html>
  <head>
    <title>bind object + repeat</title>
    <script src="../../polymer.js"></script>
    <script src="../../tools/test/htmltest.js"></script>
    <script src="../../node_modules/chai/chai.js"></script>
  </head>
  <body>
    <x-bind-obj></x-bind-obj>
    <polymer-element name="x-foo" attributes="obj">
      <template>
        <p>obj.foo is {{obj.foo}}</p>
      </template>
      <script>
        Polymer('x-foo', {
          objChanged: function() {
            console.log('x-foo', this.obj);
          }
        });
      </script>
    </polymer-element>
    <polymer-element name="x-bind-obj">
      <template>
        <x-foo obj="{{testObj}}"></x-foo>
        <div>
          <template repeat="{{arr}}">
            <x-foo obj="{{}}"></x-foo>
          </template>
        </div>
      </template>
      <script>
        Polymer('x-bind-obj', {
          testObj: null,
          arr: null,
          ready: function() {
            this.testObj = {foo: 'single'};
            this.arr = [];
            for (var i = 0; i < 3; i++) {
              this.arr.push({foo: 'array ' + i});
            }
          }
        });
      </script>
    </polymer-element>
    <script>
      var assert = chai.assert;
      document.addEventListener('WebComponentsReady', function() {
        dirtyCheck();
        var o = document.querySelector('x-bind-obj');
        var root = o.webkitShadowRoot;
        f = root.querySelector('x-foo');
        assert.equal(f.obj, o.testObj);
        
        function checkXFoo(inXFoo) {
          var p = inXFoo.webkitShadowRoot.querySelector('p');
          assert.isDefined(inXFoo.obj.foo);
          assert.equal(p.innerHTML, 'obj.foo is ' + inXFoo.obj.foo);
        }
        
        setTimeout(function() {
          checkXFoo(f);

          var d = root.querySelector('div');
          Array.prototype.forEach.call(d.querySelectorAll('x-foo'), function(x) {
            checkXFoo(x);
          });

          done();
        });
      });
    </script>
  </body>
</html>
